@import '../../../styles/_commonColor.scss';

.orderDetails{
  .orderState{
    text-align: center;
    background: $white;
    padding: .6rem 0 .42rem 0;
    &>img{
      width: .5rem;
      height: .5rem;
      line-height: 0;
      margin-bottom: .08rem;
    }
    &>div{
      font-size: .3rem;
      min-height: .3rem;
      color: $slidergreen;
    }
    &>p{
      font-size: .28rem;
      min-height: .3rem;
      color: $gray;
      padding: 0 .3rem;
    }
  }

  .processProgress{
    background: $white;
    position: relative;
    .title{
      position: relative;
      margin-left: .3rem;
      height: .76rem;
      line-height: .76rem;
      color: #ababab;
      &>i{
        border-left: .04rem solid #00B387;
        margin-right: .1rem;
      }

      .toDetail{
        float: right;
        position: relative;
        padding-right: .66rem;
        color: $slidergreen;
        &>img{
          width: .16rem;
          height: .24rem;
          position: absolute;
          right: .3rem;
          top: 50%;
          transform: translateY(-50%);
          -webkit-transform: translateY(-50%);
        }
        &>span{
            font-size: .28rem;
        }
      }
    }
    .currentProgress{
      margin:.28rem .3rem 0 .3rem;
      position: relative;
      padding-left: .18rem;
      .curretLine{
        border-left: 1PX solid #00B488;
        min-height: 1.14rem;
        padding-left: .36rem;
        color: $slidergreen;
        &>img{
          width: .36rem;
          height: .36rem;
          position: absolute;
          left: 0;
          background: $white;
        }
        .text_s{
          word-break: break-all;
          word-wrap:break-word;
          font-size: .32rem;
          margin-bottom: .18rem;
          //height: .36rem;
          line-height: .36rem;

        }
        .time_d{
          font-size: .24rem;
        }
      }
    }
  } 

  .required{
    background: $white;
    padding: .3rem;
    &>div{
      &:first-child{
        color: $black;
        font-size: .32rem;
      }
      font-size: .24rem;
      color: $slidergreen;
      line-height: .4rem;
    }
  }

  .handleProcess{
    position: relative;
    .process{
      background:$white;
      overflow:hidden;
      font-size: .24rem;
      color:$gray;
      .processStyleAll{
        width: 25%;
        position: relative;
        float: left;
        margin-top: .1rem;
        text-align:center;
        padding-bottom: .22rem;
        padding-top: .83rem;
      }

      .xd_icon{
        background:url(../../../images/xd_icon.png) no-repeat center .17rem scroll;
        background-size: .48rem;
      }
      .sm_icon{
        background:url(../../../images/sm_icon.png) no-repeat center .17rem scroll;
        background-size: .48rem;
      }
      .ss_icon{
        background:url(../../../images/ss_icon.png) no-repeat center .17rem scroll;
        background-size: .48rem;
      }
      .cz_icon{
        background:url(../../../images/cz_icon.png) no-repeat center .17rem scroll;
        background-size: .48rem;
      }

    }
  }

  .details{
    background: $white;
    .detailList{
      padding: .28rem .3rem;
      font-size: .26rem;
      color: $deepergray;
      .msg{
       line-height: .45rem;
        span{
          &:nth-child(2){
            float: right;
          }
        }
      }
    }
  }

}